<!-- Product_details商品详情 -->
<template>
    <div class="product_details">
        <div class="details-banner">
            <mt-swipe :auto="4000" v-if='message.adv_url_list != null'>
                <mt-swipe-item v-for='(item,key) in message.adv_url_list' :key='key' ><img :src="item" alt=""></mt-swipe-item>
            </mt-swipe>
            <div v-else>
                <img :src="message.cover_url" alt="">
            </div>
        </div>
        <div class="details-header">
            <div class="title">
                <div class="title-l"><span>{{message.title}}</span></div>
                <div class="title-r" @click='addGoodsCollect'><i class="iconfont icon-xin1" :class="{active : message.collect_goods}"></i>
                    <p>收藏</p></div>
            </div>
            <div class="money"><strong>{{message.price}}</strong><span>{{message.min_shop}}件以上</span></div>
            <div class="message">
                <ul>
                    <li>快递:<span>{{message.expressage}}</span></li>
                    <li>销量:<span class="sales-volume">{{message.pub_sales}}</span></li>
                    <li>浏览量:<span>{{message.pub_view}}</span></li>
                </ul>
            </div>
            <div class="guarantee">
                <ul>
                    <li><i class="iconfont icon-icon"></i><span>原创设计</span></li>
                    <li><i class="iconfont icon-zhengpinbaozheng"></i><span>品质保证</span></li>
                    <li><i class="iconfont icon-xinwenshenhedan-bianjizhizuo"></i><span>款式新颖</span></li>
                    <li><i class="iconfont icon-caidanshejishi"></i><span>全新打板</span></li>
                </ul>
            </div>
            <div class="shop-message">
                <div class="message-info">
                    <router-link tag='div'  :to="{path:'/stylist_shop',query:{ id:message.shop_id }}"  class="left">
                        <img :src="message.shop_logo"><span>{{message.shop_name}}</span>
                    </router-link>
                    <div class="right">
                        <div @click='addMerchantCollect' :class="{collect : message.collect_merchant}" ><i class="iconfont icon-xin1" ></i><span>收藏</span></div>
                    </div>
                </div>
                <div class="message-details">
                    <div class="details-title">
                        <p>商品详情</p>
                    </div>
                    <div class="details-message">
                        <div >
                           <p>{{message.pub_detail}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="details-footer">
            <div class="footer-div footer-left">
                <router-link to="/shoppingCart" class="shoppingcat" tag='a'>订货单</router-link>
                <router-link  :to="{path:'/stylist_shop',query:{ id:message.shop_id }}"  class="shoppingcat"  tag='a'><i class='iconfont icon-shop'></i>店铺</router-link>
            </div>
            <div class="footer-div footer-right">
                <a class='backgrounds pay' @click='model(0)' >加入购物车</a>
                <a class='backgrounds pay' @click='model(1)'>立即支付</a>
            </div>
            <div class='clearfix'></div>
        </div>
        <div class="details-model">
            <mt-popup
                    v-model="popupVisible"
                    position="bottom">
                <div class="item">
                    <div class="title">
                        <div class="left">
                            <div class="img"><img :src="message.cover_url" alt=""></div>
                            <div class="content">
                                <strong>{{message.price}}</strong><span class='maxnumber'>{{message.min_shop}}件以上</span>
                                <p>库存<span>{{message.num}}</span>件</p>
                                <p>请选择规格</p>
                            </div>
                        </div>
                        <div class="right"><span @click='model()'>x</span></div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="content">
                        <div class="info">
                            <div class="imessage">
                                <p>颜色</p>
                                <span :class='{"active" : select == key}'  v-for='(item,key) in message.colour' :key='key' @click='selectProp(key,item)' >{{item}}</span>
                            </div>
                            <div class="imessage" >
                                <p>尺码</p>
                                <span :class='{"active" : select1 == key}' @click='selectProp1(key,item)' v-for='(item,key) in message.size' :key='key'>{{item}}</span>
                            </div>
                        </div>
                        <div class="num">
                            <div class="left">数量</div>
                            <div class="right"> <div class='num1'> <input type="button" value="-" @click='regulation($event)'> <input type="tel" value="1" v-model='number'>
                                <input type="button" value="+" @click='regulation($event)'>
                            </div>
                            </div>
                        </div>
                    </div>
                    <div class="btn">
                        <mt-button size="large" class='backgrounds' @click='play'>确定</mt-button>
                    </div>
                </div>
            </mt-popup>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                selected: '作品',
                goods_id:'',
                collect_goods: false,
                collect_merchant:false,
                popupVisible: false,
                select: '',
                select1: '',
                message: [],
                pay_state:0,
                size:'',
                color:'',
                number:0,
                minNum:0,
                maxNum:0
            }
        },
        methods: {
            addGoodsCollect () {
                const that = this;
                const url = that.getUrl('goods/add_goods_collect');
                const params = {
                    token: that.getToken(),
                    goods_id:that.goods_id
                };
                that.$http.post(url, params, {emulateJSON: true}).then(function (res) {
                    if (res.data.code === 0) {
                        that.collect_goods = !that.collect_goods;
                        that.$messagebox('提示', res.data.data).then(res =>{
                            const url1 = that.getUrl('goods/detail');
                            that.goods_id = that.$route.query.id
                            const params1 = {
                                token: that.getToken(),
                                good_id: that.$route.query.id
                            }
                            that.$http.post(url1, params1, {emulateJSON: true}).then(res => {
                                if (res.data.code === 0) {
                                    that.message = res.data.data;
                                }
                            }, err => {
                            })
                        });

                    } else {
                        that.$messagebox('提示', '未知错误');
                    }
                }, function (err) {
                    this.$messagebox('提示', '找不到服务器，请稍后再试');
                })
            },
            addMerchantCollect () {
                const that = this;
                const url = that.getUrl('goods/add_merchant_collect');
                const params = {
                    token: that.getToken(),
                    shop_id:that.message.shop_id
                };
                that.$http.post(url, params, {emulateJSON: true}).then(function (res) {
                    if (res.data.code === 0) {
                        that.collect_merchant = !that.collect_merchant;
                        that.$messagebox('提示', res.data.data).then(res =>{
                            const url1 = that.getUrl('goods/detail');
                            that.goods_id = that.$route.query.id
                            const params1 = {
                                token: that.getToken(),
                                good_id: that.$route.query.id
                            }
                            that.$http.post(url1, params1, {emulateJSON: true}).then(res => {
                                if (res.data.code === 0) {
                                    that.message = res.data.data;
                                }
                            }, err => {
                            })
                        });
                    } else {
                        that.$messagebox('提示', '未知错误');
                    }
                }, function (err) {
                    this.$messagebox('提示', '找不到服务器，请稍后再试');
                })
            },
            model (type) {
                if(type === 0){
                    this.pay_state = 0
                }else if(type === 1){
                    this.pay_state = 1
                }else {
                    this.popupVisible = !this.popupVisible;
                    return false
                }
                this.popupVisible = !this.popupVisible;
                return false
            },
            selectProp (key,val) {
                this.select = key;
                this.color = val;

            },
            selectProp1 (key,val) {
                this.select1 = key;
                this.size = val;
            },
            play(){
                const that = this;
                if(that.pay_state == 0){
                    let params = {
                        token:that.getToken(),
                        opt:that.color + '+' + that.size,
                        num:parseInt(that.number),
                        goods_id:that.goods_id
                    }
                    let url = that.getUrl('cart/add');
                     that.$http.post(url, params, {emulateJSON: true}).then(res => {
                        if (res.data.code === 0) {
                            that.$messagebox('提示', res.data.data);
                        } else {
                            that.$messagebox('提示', res.data.errMsg);
                        }
                    }, err => {
                    })
                    console.log(params);
                }else {
                    console.log('456');
                }

            },
            regulation(e){
                const that = this;
               if(e.target.value == '-'){
                   that.number = that.number > that.minNum ? that.number -=1 :  that.minNum
               }else {
                   that.number = that.number <  that.maxNum ? that.number +=1 :  that.maxNum
               }
            }
        },
        created (){
            const that = this;
            const url = that.getUrl('goods/detail');
            that.goods_id = that.$route.query.id
            const params = {
                token: that.getToken(),
                good_id: that.$route.query.id
            }
            that.$http.post(url, params, {emulateJSON: true}).then(res => {
                if (res.data.code === 0) {
                    that.message = res.data.data;
                    that.number = res.data.data.min_shop;
                    that.minNum = res.data.data.min_shop;
                    that.maxNum = res.data.data.num;
                    that.color = res.data.data.colour[0];//获取默认颜色
                    that.size = res.data.data.size[0];//获取默认尺寸
                } else {
                    that.$messagebox('提示', res.data.errMsg);
                }
            }, err => {
            })

        }
    }
</script>
<style lang="less" rel="stylesheet/less">
    @import "../../lib/less/normalize";
    @import "../../lib/less/variable";

    #backgrounds() {

        color: #fff;
        button {
            color: #fff;
        }
        background: -moz-linear-gradient(left, rgba(25, 95, 195, 1) 0%, rgba(21, 87, 188, 1) 14%, rgba(14, 120, 206, 1) 42%, rgba(14, 120, 206, 1) 43%, rgba(14, 120, 206, 1) 52%, rgba(21, 87, 188, 1) 74%, rgba(21, 87, 188, 1) 80%, rgba(35, 31, 157, 1) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(25, 95, 195, 1)), color-stop(14%, rgba(21, 87, 188, 1)), color-stop(42%, rgba(14, 120, 206, 1)), color-stop(43%, rgba(14, 120, 206, 1)), color-stop(52%, rgba(14, 120, 206, 1)), color-stop(74%, rgba(21, 87, 188, 1)), color-stop(80%, rgba(21, 87, 188, 1)), color-stop(100%, rgba(35, 31, 157, 1)));
        background: -webkit-linear-gradient(left, rgba(25, 95, 195, 1) 0%, rgba(21, 87, 188, 1) 14%, rgba(14, 120, 206, 1) 42%, rgba(14, 120, 206, 1) 43%, rgba(14, 120, 206, 1) 52%, rgba(21, 87, 188, 1) 74%, rgba(21, 87, 188, 1) 80%, rgba(35, 31, 157, 1) 100%);
        background: -o-linear-gradient(left, rgba(25, 95, 195, 1) 0%, rgba(21, 87, 188, 1) 14%, rgba(14, 120, 206, 1) 42%, rgba(14, 120, 206, 1) 43%, rgba(14, 120, 206, 1) 52%, rgba(21, 87, 188, 1) 74%, rgba(21, 87, 188, 1) 80%, rgba(35, 31, 157, 1) 100%);
        background: -ms-linear-gradient(left, rgba(25, 95, 195, 1) 0%, rgba(21, 87, 188, 1) 14%, rgba(14, 120, 206, 1) 42%, rgba(14, 120, 206, 1) 43%, rgba(14, 120, 206, 1) 52%, rgba(21, 87, 188, 1) 74%, rgba(21, 87, 188, 1) 80%, rgba(35, 31, 157, 1) 100%);
        background: linear-gradient(to right, rgba(25, 95, 195, 1) 0%, rgba(21, 87, 188, 1) 14%, rgba(14, 120, 206, 1) 42%, rgba(14, 120, 206, 1) 43%, rgba(14, 120, 206, 1) 52%, rgba(21, 87, 188, 1) 74%, rgba(21, 87, 188, 1) 80%, rgba(35, 31, 157, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#195fc3', endColorstr='#231f9d', GradientType=1);
    }
    .product_details {
        width: 100%;
        .details-banner {
            width: 100%;
            .h(225);
            img {
                width: 100%;
            }
        }
        .details-header {
            width: 100%;
            .title {
                width: 100%;
                .h(40);
                .padding(10, 10);
                background: #fff;
                box-sizing: border-box;
                .title-l {
                    width: 75%;
                    display: inline-block;
                    vertical-align: bottom;
                    box-sizing: border-box;
                    .lh(40);
                    .fs(16);
                    span {
                        font-weight: bold;
                        display: inline-block;
                        .mt(-17);
                    }
                }
                .title-r {
                    display: inline-block;
                    width: 19%;
                    box-sizing: border-box;
                    .lh(20);
                    .pr(20);
                    text-align: right;
                    border-left: 1px solid #ccc;
                    i {
                        .fs(23);
                    }
                    i.active{
                        color: #0F7ADA;
                    }
                    p {
                        .mt(-5);
                    }
                    i.title-active {
                        color: #0F7ADA;
                    }

                }

            }
            .money {
                width: 100%;
                .h(40);
                .lh(40);
                background: #fff;
                .padding(0, 10);
                box-sizing: border-box;
                strong:before {
                    content: '￥';
                }
                strong {
                    .fs(16);
                    color: #0F7ADA;
                }

                span {
                    display: inline-block;
                    .h(25);
                    .lh(25);
                    .padding(0, 5);
                    .fs(14);
                    color: #fff;
                    background: #EC6941;
                    vertical-align: initial;
                    .ml(5);
                    border-radius: 3px;

                }
            }
            .message {
                width: 100%;
                background: #fff;
                .h(40);
                .lh(38);
                ul {
                    display: flex;
                    .padding(0, 10);
                    box-sizing: border-box;
                    li {
                        flex: 1;
                        .fs(12);
                        .sales-volume:after {
                            content: "件"
                        }
                        span {
                            vertical-align: bottom;
                        }
                    }
                }
            }
            .guarantee {
                width: 100%;
                .h(40);
                .lh(38);
                background: #fff;
                border-bottom: 1px solid #ccc;
                border-top: 1px solid #ccc;
                ul {
                    display: flex;
                    li {
                        flex: 1;
                        text-align: center;
                        span {
                            vertical-align: bottom;
                        }
                        i {
                            .fs(20);
                        }
                    }
                }
            }
            .shop-message {
                width: 100%;
                .mt(10);
                .mb(10);
                .message-info {
                    width: 100%;
                    .h(80);
                    .lh(80);
                    background: #fff;
                    .left {
                        width: 49%;
                        display: inline-block;
                        box-sizing: border-box;
                        img {
                            .w(60);
                            .h(60);
                            vertical-align: middle;
                            .padding(0, 10);
                        }
                        span {
                            .fs(16);
                            font-weight: bold;
                        }
                    }
                    .right {
                        width: 49%;
                        display: inline-block;
                        text-align: right;
                        .pr(20);
                        div {
                            display: inline-block;
                            .w(60);
                            .h(30);
                            .lh(28);
                            text-align: center;
                            border: 1px solid #ccc;
                            i {
                                .fs(18);
                            }
                            span {
                                vertical-align: top;
                                .pl(5);
                            }
                        }
                        .collect {
                            color: #0F7ADA;
                            border: 1px solid #0F7ADA;
                        }
                    }
                }
                .message-details {
                    width: 100%;
                    .mt(5);
                    .details-title {
                        background: #fff;
                        width: 100%;
                        text-align: center;
                        .h(30);
                        .lh(30);
                        .fs(16);
                    }
                    .details-message {
                        width: 100%;
                        img {
                            width: 100%;
                        }
                    }

                }

            }
        }
        .details-footer {
            width: 100%;
            .h(51);
            .fs(14);
            box-sizing: border-box;
            text-align: center;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            border-top: 1px solid #ccc;
            background: #fff;
            z-index: 99;
            .footer-div {
                width: 50%;
                height: 100%;
                .lh(50);
                float: left;
                display: flex;
                text-align: center;
                overflow: hidden;
                a {
                    flex: 1;
                    color: #666;
                }
                a.pay {
                    color: #fff;
                }
            }
            .footer-left {
            }

        }
        .details-model {
            width: 100%;
            .mint-popup {
                width: 100%;
            }
            .item {
                width: 100%;
                .title {
                    width: 100%;
                    .h(80);
                    .left {
                        width: 70%;
                        .img {
                            width: 40%;
                            height: 100%;
                            display: inline-block;
                            img {
                                .w(80);
                                .h(100);
                                border-radius: 5px;
                                position: relative;
                                .left(10);
                                .top(-20);
                            }
                        }
                        .content {
                            display: inline-block;
                            width: 55%;
                            height: 100%;
                            vertical-align: top;
                            box-sizing: border-box;
                            .pt(10);
                            strong {
                                color: #0F7ADA;
                                .padding(0, 5);
                                .fs(16);
                            }
                            strong:before {
                                content: '￥';
                            }
                            span {
                                vertical-align: top;
                            }
                            .maxnumber {
                                display: inline-block;
                                .padding(0, 5);
                                background: #EC6941;
                                color: #fff;
                                border-radius: 3px;
                            }
                        }
                    }
                    .left, .right {
                        float: left;
                        height: 100%;
                    }
                    .right {
                        width: 30%;
                        text-align: right;
                        span {
                            .w(20);
                            .h(20);
                            .lh(16);
                            .fs(15);
                            text-align: center;
                            display: inline-block;
                            border-radius: 50%;
                            border: 1px solid #666;
                        }
                    }
                }
                .content {
                    .info {
                        .imessage {
                            box-sizing: border-box;
                            p {
                                .padding(5, 10)
                            }
                            width: 100%;
                            .mb(10);
                            span {
                                width: auto;
                                .minW(50);
                                .h(30);
                                .lh(30);
                                display: inline-block;
                                text-align: center;
                                background: #E1E1E1;
                                .padding(0, 5);
                                border-radius: 3px;
                                .mr(5);
                            }
                            span.active {
                                #backgrounds;
                            }
                        }
                    }
                    .num {
                        width: 100%;
                        .h(40);
                        border-top: 1px solid #ccc;
                        .lh(40);
                        .padding(0, 10);
                        .mb(10);
                        box-sizing: border-box;
                        .left, .right {
                            width: 50%;
                            height: 100%;
                            float: left;
                        }
                       /* .right {
                            text-align: right;
                            input {
                                display: inline-block;
                                background: transparent;
                                color: #666;
                                border: 1px solid #ccc;
                                padding: 0;
                                margin: 0;
                                .w(60);
                                .h(30);
                                .lh(30);
                                text-align: center;
                            }
                            input[type='button'] {
                                .w(20)
                            }
                            input[type='number'] {
                                .h(28);
                                border-left: none;
                                border-right: none;
                            }
                        }*/
                        .right {
                            height: 100%;
                            display: inline-block;
                            text-align: right;
                            box-sizing: border-box;
                            .num1{
                                text-align: center;
                                display: inline-block;
                                input{
                                    .w(30);
                                    .h(30);
                                    .lh(30);
                                    background: none;
                                    border:1px solid #ccc;
                                    text-align: center;
                                    display: inline-block;
                                }
                                input[type='tel']{
                                    .w(60);
                                    .h(28);
                                }
                            }
                            button{
                                .w(45);
                                .h(25);
                                .mt(5);
                                background-color:#0F7ADA;
                                color: #fff;
                                border: none;
                                border-radius: 3px;
                            }
                        }
                    }

                }
                .btn {

                }

            }
        }
    }
</style>
